<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/tahome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>历史记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane label="季报历史记录">
        <el-row style="padding:20px 20px;">
          <el-col :span="6">
            <el-date-picker
              v-model="reportYear"
              value-format="yyyy"
              align="right"
              type="year"
              placeholder="选择年">
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-select v-model="thisquarter" placeholder="选择季度">
              <el-option
                v-for="item in quarters"
                :key="item.id"
                :label="item.title"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-button type="primary" icon="search" @click="handleClickSearch">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table
              v-loading="table_loading"
              :data="reportList"
              style="width: 100%">
              <el-table-column align="center" header-align="center" label="文件名" width="200">
                <template slot-scope="scope">
                  <a href="javascript:;" @click="handleClickShowReport(scope.row)">{{scope.row.year}}年第{{scope.row.season}}季度季报</a>
                </template>
              </el-table-column>
              <el-table-column align="center" header-align="center" prop="name" label="填表人"></el-table-column>
              <el-table-column align="center" header-align="center" prop="phone" label="填表人电话" width="200"></el-table-column>
              <el-table-column align="center" header-align="center" prop="createdAt" label="报表日期" width="200"></el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="省局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.provinceState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else-if="scope.row.provinceState === 1">还未审核</el-tag>
                  <el-tag v-else type="info">无需审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column  header-align="center"  align="center" width="120" label="市局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.cityState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else-if="scope.row.cityState === 1">还未审核</el-tag>
                  <el-tag v-else type="info">无需审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column header-align="center"  align="center" width="120" label="县局审核" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.countryState === 2" type="success">审核通过</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 3" type="danger">退回重填</el-tag>
                  <el-tag v-else-if="scope.row.countryState === 1">还未审核</el-tag>
                  <el-tag v-else type="info">无需审核</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" header-align="center"  width="100" >
                <template slot-scope="scope" v-if="scope.row.withdrawState === 1">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleToWithdraw()">撤回</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogTableVisible" :show-close="false">
      <div slot="title" style="text-align: center">
        {{dialogTitle}}
      </div>
      <v-view-report></v-view-report>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import vViewReport from "./ViewReport.vue";
export default {
  components: {
    vViewReport
  },
  computed: {
    ...mapGetters(["reportList"])
  },
  created() {
    this.table_loading = true;
    this.getReportHistory().then(() => {
      setTimeout(() => {
        this.table_loading = false;
      }, 500);
    });
  },
  data() {
    return {
      thisquarter: "",
      reportYear: "",
      table_loading: false,
      quarters: [
        {
          id: 1,
          title: "第一季度"
        },
        {
          id: 2,
          title: "第二季度"
        },
        {
          id: 3,
          title: "第三季度"
        },
        {
          id: 4,
          title: "第四季度"
        }
      ],
      dialogTableVisible: false,
      dialogTitle: ""
    };
  },
  methods: {
    ...mapActions(["getReportDetailForId", "getReportHistory"]),
    handleClickShowReport(row) {
      this.getReportDetailForId(row.id).then(() => {
        this.dialogTableVisible = true;
        this.dialogTitle = row.year + "年第" + row.season + "季度季报";
      });
    },
    handleClickSearch() {
      this.table_loading = true;
      this.getReportHistory({
        year: this.reportYear,
        season: this.thisquarter
      }).then(() => {
        setTimeout(() => {
          this.table_loading = false;
        }, 500);
      });
    },
    handleToWithdraw() {
      this.$confirm("确定要撤回当前季报?", "提示", {
        showCancelButton: true,
        dangerouslyUseHTMLString:true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          new Promise((resolve, reject) => {
            this.$http.fetchPost("/ta/cancelreport", {}).then(
              res => {
                this.$message({
                  type: "success",
                  message: res.data
                });
                this.handleClickSearch();
              },
              res => {
                reject(res);
              }
            );
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>
<style scoped>
</style>
